<template>
  <div class="products">
    <el-table class="table" :data="products">
      <el-table-column label="商品预览" width="200">
        <template slot-scope="scope">
          <el-image :src="scope.row.image">
            <div slot="error" class="image-slot">
              <div style="margin-top: 0%" />
              <i class="el-icon-picture-outline"></i>
              <span class="demonstration">（无预览）</span>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="产品名称"> </el-table-column>
      <el-table-column prop="description" label="介绍"> </el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="total" label="剩余"></el-table-column>
      <el-table-column prop="manufacturer.name" label="生产厂商">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <product-button :id="scope.row._id"></product-button>
          <el-button
            @click="viewDetail(scope.row._id)"
            type="text"
            size="small"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.products {
  padding-top: 10px;
  text-align: center;
}
.table {
  margin: 0 auto;
  /* width: 900px; */
}
.el-table .cell {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>

<script>
import ProductButton from "./ProductButton";
export default {
  name: "product-item",
  props: ["products"],
  components: {
    "product-button": ProductButton,
  },
  methods: {
    viewDetail(id) {
      console.log("clicked id: " + id);
      this.$router.push("/detail/" + id);
    },
  },
};
</script>